<template>
  <div>
    <!-- <div class="tip" @click="type == 1 ? type = 2 : type = 1;getData()">点击切换{{type == 1 ? '江西省' : '全国'}}地图</div> -->
    <div :style="{height:'220px',width:'100%'}" ref="myEchart"></div>
  </div>
</template>

<style scope>
  .tip{
    font-size: 0.8rem;
  }
</style>

<script>
  import echarts from "echarts";
  import 'echarts/map/js/china.js' // 引入中国地图数据
  import 'echarts/map/js/province/jiangxi.js'
  export default {
    name: "echarts",
    props: ["userJson"],
    data() {
      return {
        chart: null,
        mapInfo: {},
        mapData: [],
        type: 1
      };
    },
    mounted() {
      this.getData()
    },
    beforeDestroy() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    methods: {
      getData(){
        this.getMap(this.type,()=>{
          this.chinaConfigure();
        })
      },
      getMap(type,callback){
        this.$axios('restful/big/event/address?randomSignature=' + this.$route.params.id + '&type=' + type)
        .then(res=>{
          if(res.data.code == 1){
            let data = res.data.object
            let arr = []
            for(let i in data){
              arr.push({
                name: i.replace('省',''),
                value: data[i]
              })
            }
            this.mapData = arr
            if(this.type == 1){
              this.$emit('success','共经过全国<span class="i"> ' + arr.length + ' </span>个省')
            }else{
              this.$emit('success','共经过全省<span class="i"> ' + arr.length + ' </span>个市')
            }
            
            callback()
          }else{
            alert(res.data.message)
          }
        })
      },
      chinaConfigure() {
        let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置    
        window.onresize = myChart.resize;
        myChart.setOption({ // 进行相关配置
          backgroundColor: "rgba(0,0,0,0.0)",
          tooltip: {}, // 鼠标移到图里面的浮动提示框
          dataRange: {
            show: false,
            min: 0,
            max: 30,
            text: ['High', 'Low'],
            realtime: true,
            calculable: true,
            color: ['#ED3239', '#F36C68' ,'#FAAA91', '#F49B9F' , '#FAC1B6']
          },
          geo: { // 这个是重点配置区
            map: this.type == 1 ? 'china' : '江西', // 表示中国地图
            roam: false,
            zoom: this.type == 1 ? 1.2 : 1.1,
            label: {
              normal: {
                show: true, // 是否显示对应地名
                textStyle: {
                  color: 'rgba(0,0,0,0.4)',
                  fontSize: 9
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis: {
                areaColor: null,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [{
              type: 'scatter',
              coordinateSystem: 'geo' // 对应上方配置
            },
            {
              name: '出差天数', // 浮动框的标题
              type: 'map',
              geoIndex: 0,
              data: this.mapData
            }
          ]
        })
      }
    }
  }
</script>